/* eslint-disable vue/no-unused-components */
<template>
  <ve-bmap
    :settings="chartSettiing"
    :title="title"
    :tooltip="tooltip"
    :series="chartSeries"
    height="100%"
  ></ve-bmap>
</template>

<script>
import comminDataMixin from '../../mixins/comminDataMixin'
// @ is an alias to /src
const mapstyleOpt = [
  {
    featureType: 'water',
    elementType: 'all',
    stylers: {
      color: '#d1d1d1'
    }
  },
  {
    featureType: 'land',
    elementType: 'all',
    stylers: {
      color: '#f3f3f3'
    }
  },
  {
    featureType: 'railway',
    elementType: 'all',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'highway',
    elementType: 'all',
    stylers: {
      color: '#fdfdfd'
    }
  },
  {
    featureType: 'highway',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'arterial',
    elementType: 'geometry',
    stylers: {
      color: '#fefefe'
    }
  },
  {
    featureType: 'arterial',
    elementType: 'geometry.fill',
    stylers: {
      color: '#fefefe'
    }
  },
  {
    featureType: 'poi',
    elementType: 'all',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'green',
    elementType: 'all',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'subway',
    elementType: 'all',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'manmade',
    elementType: 'all',
    stylers: {
      color: '#d1d1d1'
    }
  },
  {
    featureType: 'local',
    elementType: 'all',
    stylers: {
      color: '#d1d1d1'
    }
  },
  {
    featureType: 'arterial',
    elementType: 'labels',
    stylers: {
      visibility: 'off'
    }
  },
  {
    featureType: 'boundary',
    elementType: 'all',
    stylers: {
      color: '#fefefe'
    }
  },
  {
    featureType: 'building',
    elementType: 'all',
    stylers: {
      color: '#d1d1d1'
    }
  },
  {
    featureType: 'label',
    elementType: 'labels.text.fill',
    stylers: {
      color: '#999999'
    }
  }
]
// eslint-disable-next-line no-unused-vars
const convertData = function (data, geo) {
  const res = []
  data.forEach((item) => {
    const { name, value } = item
    const coord = geo[name]
    res.push({
      name,
      value: [...coord, value]
    })
  })

  return res
}
export default {
  mixins: [comminDataMixin],
  data() {
    return {
      title: {
        text: '订房数据大盘',
        subtext: '实际入住统计',
        subLink: 'https://www.bthhotels.com/',
        left: 'center'
      },
      tooltip: {},
      chartSettiing: {
        key: 'Yw0MD4xoTQmKI9kwxpkmr147i3Gx1jGS',
        bmap: {
          center: [116.403039, 39.91513],
          zoom: 5, // 缩放级别
          roam: false, // 是否允许缩放
          mapStyle: {
            // 定制 地图样式
            styleJson: mapstyleOpt
          }
        }
      },
      chartSeries: []
    }
  },
  watch: {
    mapData() {
      const { data, geo } = this.mapData
      console.log(this.mapData)
      this.chartSeries = [
        {
          name: '总入住数', // 显示名称
          type: 'scatter', // 散点图
          coordinateSystem: 'bmap', // 坐标系统  高德  和 百度的 坐标系统 是不一样的
          data: convertData(data, geo), // 需要绘制的点
          encode: {
            value: 2 // 显示提供数据  数组中的 第二项
          },
          // 定制 点的样式
          itemStyle: {
            color: 'purple'
          },
          // 定制 点的大小
          symbolSize: function (val) {
            return val[2] / 10
          },
          // 定制 lable
          label: {
            show: false,
            position: 'right',
            formatter: function (v) {
              return `${v.data.name} - ${v.data.value[2]}`
            }
          },
          // 鼠标houve label 才显示
          emphasis: {
            label: {
              show: true
            }
          }
        },
        {
          name: 'top 10',
          type: 'effectScatter',
          coordinateSystem: 'bmap', // 坐标系统  高德  和 百度的 坐标系统 是不一样的
          data: convertData(
            data.sort(function (a, b) {
              return b.value - a.value
            }),
            geo
          ).slice(0, 10),
          symbolSize: function (v) {
            return v[2] / 10
          },
          encode: {
            value: 2
          },
          label: {
            show: true,
            position: 'right',
            formatter: function (v) {
              return `${v.data.name}`
            }
          },
          hoverAnimation: true, // 动画
          rippleEffect: {
            // 波纹的样式
            brushType: 'stroke'
          },
          itemStyle: {
            color: 'purple',
            shadowBlur: 20,
            shadowColor: 'red'
          }
        }
      ]
    }
  }
}
</script>
